<template>
  <!-- <el-date-picker v-if="componentName == 'el-date-picker'" v-model="data" v-bind="inputAttrs" v-on="inpuInputOn"></el-date-picker> -->
  <!-- <el-cascader v-else-if="componentName == 'el-cascader'" v-model="data" v-bind="inputAttrs"></el-cascader> -->
  <component :is="componentName" v-model="data" v-bind="inputAttrs" v-on="inpuInputOn">
    <slot>
      <template v-if="componentName == 'el-select'">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        ></el-option>
      </template>
      <template v-else-if="componentName == 'el-radio-group'">
        <el-radio
          v-for="(item, index) in options"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-radio
        >
      </template>
      <template v-else-if="componentName == 'el-checkbox-group'">
        <el-checkbox
          v-for="(item, index) in options"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-checkbox
        >
      </template>
      <template v-else-if="componentName == 'el-checkbox'">{{ options.text }}</template>
    </slot>
  </component>
</template>

<script setup name="jax-input">
import _ from 'lodash-es'

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  name: String,
  modelValue: [Object, String, Number, Boolean, Array],
  type: { type: String, default: 'input' }, // Input 类型
  options: [Object, Array, String],
  inputAttr: Object, // 兼容老版本
  inputAttrs: Object,
})

const attrs = useAttrs()
const data = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val),
})

// 组件命(驼峰)
const componentName = computed(() => {
  const components = {
    input: 'el-input',
    textarea: 'el-input',
    select: 'el-select',
    radio: 'el-radio',
    // cascader: 'el-cascader', //  这个组件嵌套有点问题，请使用插槽
    checkbox: 'el-checkbox',
    switch: 'el-switch',
    upload: 'jax-upload',
    uploadImage: 'jax-upload',
    uploadImages: 'jax-upload',
    uploadFile: 'jax-upload',
    uploadFiles: 'jax-upload',
    uploadVideo: 'jax-upload',
    radioGroup: 'el-radio-group',
    checkboxGroup: 'el-checkbox-group',
    inputNumber: 'el-input-number',
    datePicker: 'el-date-picker',
    datetime: 'el-date-picker',
    datetimerange: 'el-date-picker',
    timePicker: 'el-time-picker',
    treeSelect: 'el-tree-select',
    daterange: 'el-date-picker',
  }

  const key = _.camelCase(props.type)

  return components[key] || 'el-input'
})

const inputAttrs = computed(() => {
  const { type, options } = props
  const key = _.camelCase(props.type)

  let defaultAttrs = {}

  if (['input', 'search'].includes(type)) {
    defaultAttrs.maxlength = 128
  }

  if (['input', 'select'].includes(type)) {
    if (defaultAttrs.clearable == undefined) defaultAttrs.clearable = true
  }

  if (type == 'search') {
    defaultAttrs['prefix-icon'] = 'search'
  } else if (type == 'password') {
    defaultAttrs = {
      type: 'password',
      maxlength: 12,
      minlength: 6,
    }
  } else if (type == 'textarea') {
    defaultAttrs = {
      type: 'textarea',
      rows: 4,
      // maxlength: 256,
    }
  } else if (type == 'select') {
    defaultAttrs.placeholder = '请选择'
  } else if (key == 'datePicker') {
  } else if (type == 'datetime') {
    defaultAttrs.type = 'datetime'
    defaultAttrs['format'] = 'YYYY-MM-DD HH:mm:ss' // 标签
    defaultAttrs['value-format'] = 'YYYY-MM-DD HH:mm:ss' // 值
  } else if (type == 'datetimerange') {
    defaultAttrs.type = 'datetimerange'
    defaultAttrs['format'] = 'YYYY-MM-DD HH:mm:ss' // 标签
    defaultAttrs['value-format'] = 'YYYY-MM-DD HH:mm:ss' // 值
  } else if (type == 'daterange') {
    defaultAttrs.type = 'daterange'
    defaultAttrs['format'] = 'YYYY-MM-DD' // 标签
    defaultAttrs['value-format'] = 'YYYY-MM-DD' // 值
  } else if (key == 'uploadImage') {
    defaultAttrs.type = 'image'
  } else if (key == 'uploadImages') {
    defaultAttrs.type = 'images'
  } else if (key == 'uploadVideo') {
    defaultAttrs.type = 'video'
  } else if (key == 'uploadFile') {
    defaultAttrs.type = 'file'
  } else if (key == 'uploadFiles') {
    defaultAttrs.type = 'files'
  } else if (key == 'treeSelect') {
    defaultAttrs.data = options
  } else {
    defaultAttrs.type = type
  }

  return {
    ...defaultAttrs, // 默认属性
    ...attrs, // 通过v-bind传递
    ...props.inputAttr, // 兼容处理
    ...props.inputAttrs, // 通过 props.inputAttr
  }
})

const inpuInputOn = computed(() => {
  return {}
})
</script>

<style lang="scss" scoped></style>
